<template>
	<view class="container">
		<view class="content">
			<view class="swiper">
				<image :src="img" mode=""></image>
			</view>
			<view class="list" v-for="item in rankList" :key="item.id" @click="queryRank(item.id,item.title)">
				<view class="left">
					<h3>{{item.title}}排行榜</h3>
					<p>{{item.createTime | dateFormat}}</p>
				</view>
				<view class="right">
					<image :src="item.imageUrl"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		competitions,
		getAllPicture
	} from '../../apis'
	export default {
		data() {
			return {
				rankList: [],
				img: ''
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			competitions().then((res) => {
					let [err, data] = res
					console.log("全国大赛为：" + JSON.stringify(data.data.data))
					this.rankList = data.data.data
					// console.log(data.data.data)
				}),
				getAllPicture().then((res) => {
					let [err, data] = res
					// console.log(data)
					this.img = data.data.data[3].imageUrl;
					// console.log(data.data.data)
					uni.hideLoading();
				})
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			competitions().then((res) => {
					let [err, data] = res
					console.log("全国大赛为：" + JSON.stringify(data.data.data))
					this.rankList = data.data.data
					// console.log(data.data.data)
				}),
				getAllPicture().then((res) => {
					let [err, data] = res
					// console.log(data)
					this.img = data.data.data[3].imageUrl;
					// console.log(data.data.data)
					uni.hideLoading();
				})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			queryRank(id, title) {
				uni.navigateTo({
					url: '../query/query?id=' + id + '&title=' + title
				});
			},
			onShareAppMessage: function(e) {
				let title = '蓝天飞梦小程序'
				return {
					title: title,
					path: 'pages/index/index'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.swiper {
			border-bottom: 2px solid #e3e3e3;
			padding-bottom: 5px;
			margin-top: 5px;
			width: 100%;
			height: 300px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.list {
			// display: flex;
			// justify-content: space-between;
			border-bottom: 2px solid #e3e3e3;
			padding-left: 25px;
			padding-right: 15px;
			position: relative;

			.left {
				width: 50%;
				position: absolute;
				top: 0;
				transform: translateY(50%);

				h3 {
					font-size: 14px;
					font-weight: 700;
					height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 15px;

				}

				p {
					font-size: 12px;
					color: #C8C7CC;
					position: fixed;
					bottom: -46px;
				}
			}

			.right {
				width: 40%;
				transform: translateX(150%);
				padding-top: 10px;

				image {
					width: 100%;
					height: 90px;
					border-radius: 8%;
				}
			}

		}
	}
</style>
